<template>
	<div>
		<el-form ref="refSeach1" :inline="true" :model="searchForm" size="mini">
			<el-form-item prop="caseNo" label="字典名称">
				<el-input v-model="searchForm.dicName" placeholder="请输入..."></el-input>
			</el-form-item>
			<el-form-item prop="inspectionNo" label="字典编号">
				<el-input v-model="searchForm.dicCode" placeholder="请输入..."></el-input>
			</el-form-item>

			<el-button type="primary" @click="onSearch" icon="el-icon-search" size="mini" plain>查询</el-button>
			<el-button type="primary" @click="onRest" icon="el-icon-view" size="mini" plain>重置</el-button>
			<el-button type="primary" size="mini" @click="addRow(false,1)" plain>新增</el-button>
		</el-form>
		<el-table :data="tableTreeData" :default-sort="{ prop: 'name', order: 'descending' }" size="mini" style="width: 100%" highlight-current-row>
			<el-table-column prop="name" label="字典名称" width="120">
				<template #default="scope">
					<el-link @click="onClickDicCode(scope.row,2)" type="primary">{{ scope.row.name }} </el-link></template
				>
			</el-table-column>
			<el-table-column prop="code" label="字典编号" width="120"></el-table-column>
			<el-table-column prop="status" label="是否启用" width="120">
				<template #default="scope">
					<el-tag :type="scope.row.status ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ? '启用' : '禁用' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注" />
			<el-table-column fixed="right" label="操作" width="240">
				<template #default="scope">
					<el-button type="primary" size="mini" @click.prevent="editRow(scope.row, 1)"> 编辑 </el-button>
					<el-button type="danger" size="mini" @click.prevent="deleteRow(scope.row , 1)"> 删除 </el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pager.pageSize"
			layout="prev, pager, next, jumper,total,sizes"
			:total="pager.total"
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			prev-text="上一页"
			next-text="下一页"
			background
		>
		</el-pagination>
		<el-drawer v-model="dicDataDialogVisible" @close="searchForm.parentId = 0" title="字典数据-1" size="72%"> 
			<el-form ref="refSeach2" :inline="true" :model="searchForm" size="mini">
				<el-form-item prop="dicName" label="字典名称">
					<el-input v-model="searchForm.dicName1" @input="onSearch1" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-button type="primary" size="mini" @click="addRow(true , 2)" plain>新增</el-button>
			</el-form>
			<el-table
				:data="tableTreeChildData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				size="mini"
				style="width: 100%"
				highlight-current-row
			>
				<el-table-column prop="name" label="字典名称" width="120">
					<template #default="scope">
						<el-link @click="onClickDicCode(scope.row,3)" type="primary">{{ scope.row.name }} </el-link>
						</template>	
				</el-table-column>
				<el-table-column label="字典编号" prop="code" width="120"> </el-table-column>
				<el-table-column prop="status" label="是否启用" width="120">
					<template #default="scope">
						<el-tag :type="scope.row.status ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ? '启用' : '禁用' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column fixed="right" label="操作" width="170">
					<template #default="scope">
						<el-button type="primary" size="mini" @click.prevent="editRow(scope.row, 2)"> 编辑 </el-button>
						<el-button type="danger" size="mini" @click.prevent="deleteRow(scope.row , 2)"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-drawer>
		<el-drawer v-model="dicDataDialog2Visible" @close="searchForm.parentId = 0" title="字典数据-2" size="60%"> 
			<el-form ref="refSeach2" :inline="true" :model="searchForm" size="mini">
				<el-form-item prop="dicName" label="字典名称">
					<el-input v-model="searchForm.dicName2" @input="onSearch2" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-button type="primary" size="mini" @click="addRow(true , 3)" plain>新增</el-button>
			</el-form>
			<el-table
				:data="tableTree2ChildData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				size="mini"
				style="width: 100%"
				highlight-current-row
			>
				<el-table-column prop="name" label="字典名称" width="120">
					<template #default="scope">
						<el-link @click="onClickDicCode(scope.row,4)" type="primary">{{ scope.row.name }} </el-link>
					</template>	
				</el-table-column>
				<el-table-column label="字典编号" prop="code" width="120"> </el-table-column>
				<el-table-column prop="status" label="是否启用" width="120">
					<template #default="scope">
						<el-tag :type="scope.row.status ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ? '启用' : '禁用' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column fixed="right" label="操作" width="170">
					<template #default="scope">
						<el-button type="primary" size="mini" @click.prevent="editRow(scope.row, 3)"> 编辑 </el-button>
						<el-button type="danger" size="mini" @click.prevent="deleteRow(scope.row, 3)"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-drawer>
		<el-drawer v-model="dicDataDialog3Visible" @close="searchForm.parentId = 0" title="字典数据-3" size="52%"> 
			<el-form ref="refSeach2" :inline="true" :model="searchForm" size="mini">
				<el-form-item prop="dicName" label="字典名称">
					<el-input v-model="searchForm.dicName3" @input="onSearch3" placeholder="请输入..."></el-input>
				</el-form-item>
				<el-button type="primary" size="mini" @click="addRow(true , 4)" plain>新增</el-button>
			</el-form>
			<el-table
				:data="tableTree3ChildData"
				:default-sort="{ prop: 'name', order: 'descending' }"
				size="mini"
				style="width: 100%"
				highlight-current-row
			>
				<el-table-column prop="name" label="字典名称" width="120" />
				<el-table-column label="字典编号" prop="code" width="120"> </el-table-column>
				<el-table-column prop="status" label="是否启用" width="120">
					<template #default="scope">
						<el-tag :type="scope.row.status ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ? '启用' : '禁用' }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />   
				<el-table-column fixed="right" label="操作" width="170">
					<template #default="scope">
						<el-button type="primary" size="mini" @click.prevent="editRow(scope.row, 4)"> 编辑 </el-button>
						<el-button type="danger" size="mini" @click.prevent="deleteRow(scope.row, 4)"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-drawer>
		<el-drawer v-model="centerDialogVisible" title="字典编辑" :size="420">
			<el-form :model="form" label-width="120px">
				<el-form-item label="字典名称：">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="字典编号：">
					<el-input v-model="form.code"></el-input>
				</el-form-item>
				<el-form-item label="是否启用：">
					<el-select v-model="form.status">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="字典描述：">
					<el-input v-model="form.remark" type="textarea"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">确定</el-button>
					<el-button @click="centerDialogVisible = false">取消</el-button>
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent, ref, watch } from 'vue';
import { saveDic, delDic, queryPagerDics, queryToParentId } from '../../../api/dic/index';
import { ElMessageBox, ElMessage } from 'element-plus';

export default defineComponent({
	name: 'systemDic',
	components: {},
	setup() {
		const form = reactive({
			id: 0,
			parentId: 0,
			childNode: true,
			status: true,
			name: '',
			remark: '',
			code: '',
			parentName: '',
		});
		const searchForm = reactive({
			dicName: '',
			dicCode: '',
			parentId: 0,
			parentCode: '',
			dicName1: '',
			dicName2:"",
			dicName3:"",
			lv: 0,
		});
		const pager = reactive({
			pageSize: 10,
			total: 0,
			page: 1,
		});
		const options = ref([
			{
				value: true,
				label: '是',
			},
			{
				value: false,
				label: '否',
			},
		]);
		const state = reactive({
			treeData: [{}],
			defaultProps: {
				children: 'children',
				label: 'label',
			},
			tableData: [,],
			tableTreeData: [],
			tableTreeChildData: [],
			tableTreeChildAllData: [],
			centerDialogVisible: false,
			dicDataDialogVisible: false,

			tableTree2ChildData:[],
			tableTree2ChildAllData: [],

			tableTree3ChildData:[],
			tableTree3ChildAllData: [],

			dicDataDialog2Visible:false,
			dicDataDialog3Visible:false,
			currentNode: {
				label: '',
				id: 0,
			},
			filterText: '',
		});
		function handleNodeClick() {}
		(async function () {
			await initDics();
		})();
		async function initDics() {
			await queryPagerDics({
				dicName: searchForm.dicName,
				dicCode: searchForm.dicCode,
				Page: pager.page,
				PageSize: pager.pageSize,
				parentId: searchForm.parentId,
			}).then((res: any) => {
				if (res.success) {
					state.treeData = [];
					state.tableTreeData = res.data.data;
					state.tableData = res.data.data;
					pager.total = res.data.totalCount;
				}
			});
		}
		function onNodeClick(node: any) {
			state.currentNode = node;
			const list = state.tableData.filter((x: any) => x.parentId == node.id);
			if (list.length > 0) {
				state.tableTreeData = [...list, ...state.tableData.filter((x: any) => x.id == node.id)] as any;
			} else {
				state.tableTreeData = state.tableData.filter((x: any) => x.id == node.id) as any;
			}
		}
		async function deleteRow(row: any, type: number) {
			searchForm.lv = type;
			await ElMessageBox.confirm('是否刪除?')
				.then(() => {
					delDic({ id: row.id }).then((res: any) => {
						if (res.success) {
							if (searchForm.parentId > 0) {
								initChilds(searchForm.parentId, type);
							} else {
								initDics();
							}
							ElMessage({
								message: '操作成功',
								type: 'success',
							});
						}
					});
				})
				.catch(() => {});
		}
		function editRow(row: any, type: number) {
			searchForm.lv = type;
			state.centerDialogVisible = true;
			let data: any = null;
			if (type === 1) {
				data = state.tableTreeData.find((x: any) => x.id == row.id) as any;
			} else if(type == 2){
				data = state.tableTreeChildData.find((x: any) => x.id == row.id) as any;
			}
			else if(type == 3){
				data = state.tableTree2ChildData.find((x: any) => x.id == row.id) as any;
			}
			else if(type == 3){
				data = state.tableTree3ChildData.find((x: any) => x.id == row.id) as any;
			}
			form.id = row.id;
			form.remark = data.remark;
			form.name = data.name;
			form.code = data.code;
			form.status = data.status;
			form.childNode = data.childNode;
			form.parentId = data.parentId;
		}
		function addRow(isChild: boolean, type: number) {
			searchForm.lv = type;
			state.centerDialogVisible = true;
			form.id = 0;
			form.remark = '';
			form.name = '';
			form.code = '';
			form.status = true;
			form.childNode = isChild;
			form.parentName = '';
			form.parentId = searchForm.parentId ?? 0;
		}
		async function onSubmit() {
			await saveDic(form).then((res: any) => {
				if (res.success) {
					ElMessage({ message: '操作成功', type: 'success' });
					state.centerDialogVisible = false;
					if (searchForm.parentId > 0) {
						initChilds(searchForm.parentId ,searchForm.lv);
					} else {
						initDics();
					}
				}
			});
		}
		function filterNode(value: String, data: any) {
			if (!value) return true;
			return data.label.indexOf(value) !== -1;
		}
		function onSearch() {
			initDics();
		}
		function onSearch1() {
			if (searchForm.dicName1) {
				state.tableTreeChildData = state.tableTreeChildAllData.filter((x) => x.name.indexOf(searchForm.dicName1) >= 0);
			} else {
				state.tableTreeChildData = state.tableTreeChildAllData;
			}
		}
		function onSearch2(){
			if (searchForm.dicName1) {
				state.tableTree2ChildData = state.tableTree2ChildAllData.filter((x) => x.name.indexOf(searchForm.dicName2) >= 0);
			} else {
				state.tableTree2ChildData = state.tableTree2ChildAllData;
			}
		}
		function onSearch3(){
			if (searchForm.dicName1) {
				state.tableTree3ChildData = state.tableTree3ChildAllData.filter((x) => x.name.indexOf(searchForm.dicName2) >= 0);
			} else {
				state.tableTree3ChildData = state.tableTree3ChildAllData;
			}
		}
		function onRest() {
			searchForm.dicCode = '';
			searchForm.dicName = '';
			searchForm.parentId = 0;
		}
		function onHandleSizeChange(pageSize: number) {
			pager.pageSize = pageSize;
			initDics();
		}
		function onHandleCurrentChange(pageIndex: any) {
			pager.page = pageIndex;
			initDics();
		}
		async function onClickDicCode(row: any,lv:any) { 
			searchForm.lv = lv;
			if(lv == 2){
				state.tableTreeChildData = [];
				state.tableTree2ChildData = [];
				initChilds(row.id,lv);
				searchForm.parentId = row.id;
				searchForm.parentCode = row.code;
				state.dicDataDialogVisible = true;
			}else if(lv == 3){
				state.tableTree2ChildData = [];
				state.tableTree3ChildData = [];
				initChilds(row.id,lv);
				searchForm.parentId = row.id;
				searchForm.parentCode = row.code;
				state.dicDataDialog2Visible = true;
			}
			else if(lv == 4){
				state.tableTree3ChildData = [];
				initChilds(row.id,lv);
				searchForm.parentId = row.id;
				searchForm.parentCode = row.code;
				state.dicDataDialog3Visible = true;
			}
		}
		function initChilds(pid: any,lv:any) {
			queryToParentId(pid).then((res: any) => {
				if(lv === 2){
					state.tableTreeChildData = res.data;
					state.tableTreeChildAllData = res.data;
				}else if(lv === 3){
					state.tableTree2ChildData = res.data;
					state.tableTree2ChildAllData = res.data;
				}
				else if(lv === 4){
					state.tableTree3ChildData = res.data;
					state.tableTree3ChildAllData = res.data;
				}
			});
		}
		const refTree = ref();
		watch(
			() => state.filterText,
			(val) => {
				refTree.value.filter(val);
			}
		);
		return {
			handleNodeClick,
			state,
			onSubmit,
			addRow,
			editRow,
			deleteRow,
			onNodeClick,
			options,
			form,
			filterNode,
			refTree,
			searchForm,
			onSearch,
			onSearch1,
			onSearch2,
			onSearch3,
			onRest,
			onHandleSizeChange,
			onHandleCurrentChange,
			onClickDicCode,
			pager,
			...toRefs(state),
		};
	},
});
</script>

<style scoped>
.dic-box{display:flex;}
.dic-box .col1{flex:auto;}
.dic-box .col2{width:400px;padding-left: 30px;;}
</style>
